<template>
  <component
    :is="type"
    v-bind="$props"
  />
</template>

<script>
import rType1 from './types/r-type1.vue'
import rType2 from './types/r-type2.vue'
export default {
  name: 'HzxRoller',
  components: {
    rType1,
    rType2
  },
  props: {
    type: {
      type: String,
      default: () => 'r-type1'
    },
    startVal: {
      type: Number,
      required: false,
      default: undefined
    },
    endVal: {
      type: Number,
      required: false,
      default: undefined
    },
    duration: {
      type: Number,
      required: false,
      default: undefined
    },
    autoplay: {
      type: Boolean,
      required: false,
      default: undefined
    },
    decimals: {
      type: Number,
      required: false,
      default: undefined,
      validator(value) {
        return value >= 0
      }
    },
    separator: {
      type: String,
      required: false,
      default: undefined
    },
    margin: {
      type: String,
      required: false,
      default: undefined
    },
    padding: {
      type: String,
      required: false,
      default: undefined
    },
    fontColor: {
      type: String,
      required: false,
      default: undefined
    },
    bgColor: {
      type: String,
      required: false,
      default: undefined
    },
    fontSize: {
      type: String,
      required: false,
      default: undefined
    }
  }
}
</script>

<style scoped="scoped" lang="less">
    .number{
        font-size: 200px;
    }
</style>
